<template>
  <view class="content">
    <view class="top" @click="gotoPage">
      <view>账户总资产及余额提现，请点击 </view>
      <image src="../../static/image/icon/arrow-left-1.png" class="icon"></image>
    </view>
    <view class="warp-top">
      <view class="line">
        <view class="price">{{monthBillData.accumulatedIncome | current}}</view>
        <view class="explain">
          预估总收益(元)
        </view>
        <view class="time">
          <picker mode="date" fields="month" :value="getCurTime" :end="curMonth" @change="getCheckDate">
            <view class="date">{{getCurTime}} <image src="../../static/image/icon/arrow_down.png" class="time-icon" mode=""></image></view>
          </picker>
        </view>
      </view>
    </view>
    <view class="warp-top-fixed">
      <view class="line">
        <view class="price">
          {{monthBillData.profit | current}}
        </view>
        <view class="explain">
          可提现收益(元)
        </view>
      </view>
      <view class="borde"></view>
      <view class="line">
        <view class="price">
          {{monthBillData.prearnIncome | current}}
        </view>
        <view class="explain">
          待结算收益(元)<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="isExpalin = true"></image>
        </view>
      </view>
    </view>
    <view class="warp-box">
      <view class="line tit">
        <view class="left">预估收益组成</view>
      </view>
      <view class="line" @click="gotoEarning(2)">
        <view class="left">市场推广奖励</view>
        <view class="right">{{monthBillData.marketIncentives | current}}<text class="text1"> 元</text> <image src="../../static/image/icon/arrow-r.png" class="r-icon"></view>
      </view>
      <!-- <view class="line" @click="gotoEarning(4)">
        <view class="left">礼品采购奖励</view>
        <view class="right">{{monthBillData.purchaseFlowRewards | current}} <text class="text1"> 元</text> <image src="../../static/image/icon/arrow-r.png" class="r-icon"></view>
      </view> -->
      <view class="line" @click="gotoEarning(7)">
        <view class="left">外部商城奖励</view>
        <view class="right">{{monthBillData.thirdPartyRewards | current}} <text class="text1"> 元</text> <image src="../../static/image/icon/arrow-r.png" class="r-icon"></view>
      </view>
      <view class="line" @click="gotoEarning(5)">
        <view class="left">线下流水奖励</view>
        <view class="right">{{monthBillData.offlineFlowReward | current}} <text class="text1"> 元</text> <image src="../../static/image/icon/arrow-r.png" class="r-icon"></view>
      </view>
      <view class="line" @click="gotoEarning(3)">
        <view class="left">自有商城奖励</view>
        <view class="right">{{monthBillData.pvAward | current}} <text class="text1"> 元</text> <image src="../../static/image/icon/arrow-r.png" class="r-icon"></view>
      </view>
      <!-- <view class="line">
        <view class="left">爆品奖励</view>
        <view class="right">1000.00 <text class="text1"> 元</text> <image src="../../static/image/icon/arrow-r.png" class="r-icon"></view>
      </view> -->
    </view>
    <view class="warp-box" style="margin-top: 20rpx;">
      <view class="line tit">
        <view class="left">团队贡献值名单</view>
      </view>
      <view class="line-tab">
        <view style="margin-left: 76rpx;">团长</view>
        <view style="margin-left: 160rpx;margin-right: 66rpx;">团队总流水</view>
        <view>团队贡献值</view>
      </view>
    </view>
    <view class="collapse" @click="openCollapse(index)" v-for="(item, index) in teamList" :key="index">
      <view class="collapse-body">
        <view class="user">
          <image class="img" :src="item.fileUrl"></image><text class="text2Ellipsis">{{item.userName}}</text>
        </view>
        <view class="total">{{item.teamFlowAmount | current}}</view>
        <view class="price">
          {{item.teamContributionAmount | current}}
        </view>
        <image src="../../static/image/icon/downArrow-1.png" class="price-icon" :class="{action: item.isShowSollapse}"></image>
      </view>
      <view class="collapse-son" :class="{openModal: item.isShowSollapse}">
        <view class="wrapper">
          <view class="tit">TA团队的贡献组成</view>
          <view class="line-tit">
            <view class="line"></view>
            <view class="text2">线下流水(元)</view>
            <view class="line"></view>
          </view>
          <view class="text-box">
            <text>流水总额：{{item.teamFlowAmount | current}}</text>
            <text>流水收益：{{item.offlineFlowReward | current}}</text>
          </view>
          <view class="line-tit">
            <view class="line"></view>
            <view class="text2">其他收益(元)</view>
            <view class="line"></view>
          </view>
          <view class="text-box">
            <text>市场推广奖励:{{item.marketingIncentives | current}}</text>
            <text>自有商城奖励:{{item.pvAward | current}}</text>
          </view>
          <view class="text-box" style="margin-top: 24rpx;">
            <text>外部商城奖励:{{item.thirdPartyReward | current}}</text>
            <text style="visibility: hidden">礼品采购奖励:{{item.purchaseFlowReward | current}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="more" v-if="teamList && teamList.length < pages.total" @click="getMoreList">
      查看更多团队信息 <image src="../../static/image/icon/arrow-down-1.png" class="icon"></image>
    </view>
    <view class="more" v-else>
      已经到底啦
    </view>
    <view class="new-pop-style" v-if="isExpalin">
      <view class="new-pop-box">
        <view class="pop-tit">温馨提示</view>
        <view class="pop-conter">
          待结算收益部分，因平台的审核及风控机制、商品售后维保期等因素，会出现收益发放至余额不及时情况存在，待符合发放条件将自动发放，请耐心等待！
        </view>
        <view class="pop-foot">
          <view class="btn cur" @click="isExpalin = false">我知道了</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { findMonthBill, findReward, findTeamContri } from "@/service/billingDetail/billingDetail.service.js"
  export default {
    data() {
      return {
        isShow: false,
        isExpalin: false,
        monthBillData: '',
        curMonth: '',
        firstEndTime: '',
        getCurTime: '',
        pages: {
          size: 10,
          current: 1,
          total: 0
        },
        teamList: ''
      };
    },
    onShow() {
      this.getTime();
      this.findMonthBill()
      this.findTeamContriList()
    },
    methods: {
      getTime () {
        const date = new Date();
        let year = date.getFullYear();
        let month1 = date.getMonth() + 1;
        let month2 = date.getMonth();
        let day = new Date(year, month2, 0);
        month1 = month1 > 9 ? month1 : '0' + month1;
        month2 = month2 == 0 ? 12 : month2 > 9 ? month2 : '0' + month2;
        // 上个月日期
        this.curMonth = year + "-" + month2;
        this.getCurTime = year + "-" + month2;
        // 当前月日期
        this.beginTime = year + "-" + month1 + '-01';
        // 上个月最后一天日期
        this.firstEndTime = `${year}-${month2}-${day.getDate()}`;
      },
      getCheckDate (e) {
        this.getCurTime = e.detail.value;
        this.findMonthBill();
        this.findTeamContriList()
      },
      gotoEarning (type) {
        var Y = new Date(this.getCurTime).getFullYear();
        var M = new Date(this.getCurTime).getMonth()+1;
        var date = new Date(new Date(Y, M, 0));
        this.curMonth = this.getCurTime + '-01';
        this.firstEndTime = `${Y}-${M}-${date.getDate()}`;
        uni.navigateTo({
          url: `/pages/linkEarnings/myEarnings?type=2&category=${type}&id=${type}&current=1&beginDate=${this.curMonth}&endDate=${this.firstEndTime}&status=`
        });
      },
      openCollapse (index) {
        this.teamList.forEach((item, i) => {
          if (index != i) {
            if (item.isShowSollapse) item.isShowSollapse = false;
          }
        })
        this.teamList[index].isShowSollapse = !this.teamList[index].isShowSollapse;
      },
      gotoPage () {
        uni.navigateTo({
          url: '/pages/property/myProperty'
        })
      },
      findMonthBill () {
        findMonthBill({day: this.getCurTime+'-01'}, (res) => {
          if (res.status === 0) {
            this.monthBillData = res.data
          }
        })
      },
      findTeamContriList () {
        var params = {
          size: this.pages.size,
          current: this.pages.current,
          day: this.getCurTime+'-01'
        }
        findTeamContri(params, res => {
          if (this.pages.current === 1) {
            // res = {"data":{"records":[{"userId":379,"fileUrl":"https://zy-image.oss-cn-hangzhou.aliyuncs.com/image/24ca4ee3637342358fd0fba23a43a39e","userName":"初秋'微凉","inviteId":377,"teamFlowAmount":10000.0,"teamContributionAmount":100.0,"offlineFlowReward":20.0,"marketingIncentives":30.0,"pvAward":40.0,"purchaseFlowReward":20.0,"thirdPartyReward":30.0},{"userId":380,"fileUrl":"https://zy-image.oss-cn-hangzhou.aliyuncs.com/image/24ca4ee3637342358fd0fba23a43a39e","userName":"初秋","inviteId":377,"teamFlowAmount":10000.0,"teamContributionAmount":100.0,"offlineFlowReward":20.0,"marketingIncentives":30.0,"pvAward":40.0,"purchaseFlowReward":20.0,"thirdPartyReward":30.0}],"total":2,"size":10,"pages":1,"current":1},"status":0,"msg":"success"}
            this.teamList = res.data.records;
            if (this.teamList && this.teamList.length > 0) {
              this.teamList.forEach(item => {
                this.$set(item, 'isShowSollapse', false)
              })
            }
          } else {
            this.teamList = this.teamList.concat(res.data.records)
          }
          this.pages.total = res.data.total
        })
      },
      getMoreList () {
        if (this.pages.total > this.teamList.length) {
          this.pages.current++
          this.findTeamContriList()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  font-family: PingFang-SC-Medium,PingFang-SC;
}
.top {
  width: 710rpx;
  background: rgba(254,240,190,1);
  font-size: 20rpx;
  font-weight: 500;
  color: rgba(130,86,23,1);
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icon {
    width: 12rpx;
    height: 24rpx;
  }
}
.warp-top {
  width: 690rpx;
  height: 268rpx;
  background: rgba(43,43,43,1);
  padding: 44rpx 20rpx 0 40rpx;
  display: flex;
  justify-content: space-around;
  .line {
    text-align: center;
    .price {
      font-size: 40rpx;
      font-weight: 600;
      color: rgba(247,230,186,1);
    }
    .explain {
      font-size: 24rpx;
      font-weight: 500;
      color: rgba(255,255,255,1);
      font-family: PingFang-SC-Medium,PingFang-SC;
      margin-top: 20rpx;
    }
  }
}
.r-icon {
  width: 12rpx;
  height: 24rpx;
  margin-left: 14rpx;
  vertical-align: middle;
}
.warp-top-fixed {
  width: 690rpx;
  // height: 116rpx;
  padding: 22rpx 0;
  background: rgba(255,255,255,1);
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  text-align: center;
  margin: -60rpx auto 0;
  .price {
    font-size: 28rpx;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: rgba(51,51,51,1);
  }
  .explain {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium,PingFang-SC;
    // font-weight: 500;
    color: rgba(51,51,51,1);
    margin-top: 16rpx;
  }
  .why-icon {
    width: 24rpx;
    height: 24rpx;
    vertical-align: middle;
    margin-left: 12rpx;
  }
  .borde {
    width: 4rpx;
    height: 20rpx;
    background-color: #333333;
    margin-left: 40rpx;
    margin-right: 40rpx;
  }
}
.warp-box {
  background: #FFFFFF;
  border-radius: 16px 16px 0px 0px;
  // padding: 0 28rpx 0 24rpx;
  padding-left: 24rpx;
  margin-top: 18rpx;
  .line {
    padding: 36rpx 28rpx 32rpx 0;
    display: flex;
    justify-content: space-between;
    font-family: PingFang-SC-Medium,PingFang-SC;
    color: #333333;
    font-weight: 500;
    font-size: 28rpx;
    .right {
      .r-icon {
        vertical-align: baseline;
      }
    }
    &.tit {
      border-bottom: 1px solid rgba(238,238,238,1);
      font-size: 32rpx;
      // padding: 36rpx 0 32rpx;
      .right {
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: rgba(194,172,120,1);
        .text1 {
          font-weight: 500;
          color: #333333;
          margin-left: 10rpx;
        }
      }
    }
  }
  .line-tab {
    display: flex;
    justify-content: flex-start;
    padding: 40rpx 16rpx 40rpx 0;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium,PingFang-SC;
    font-weight: 500;
    color: rgba(51,51,51,1);
  }
}
.collapse {
  font-family: PingFang-SC-Medium,PingFang-SC;
  color: #333333;
  font-weight: 500;
  font-size: 28rpx;
  .collapse-body {
    margin-top: 8rpx;
    padding: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    .user {
      width: 276rpx;
      display: flex;
      align-items: center;
      .img {
        width: 56rpx;
        height: 56rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        background-color: pink;
        flex-shrink: 0;
      }
    }
    .total {
      min-width: 192rpx;
      margin-left: 8rpx;
    }
    .price {
      min-width: 166rpx;
      margin-left: 12rpx;
    }
    .price-icon {
      width: 20rpx;
      height: 10rpx;
      margin-left: 12rpx;
      transform: rotate(0deg);
      transition-property: transform;
      transition-duration: 0.3s;
      transition-timing-function: ease;
      &.action {
        transform: rotate(180deg);
      }
    }
  }
  .collapse-son {
    height: 0;
    overflow: hidden;
    .wrapper {
      padding: 24rpx;
      background-color: #FFFFFF;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transition-property: transform;
      transition-duration: 0.3s;
      transition-timing-function: ease;
      .tit {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(51,51,51,1);
      }
      .line-tit {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32rpx;
        .line {
          width: 40rpx;
          height: 4rpx;
          opacity: 0.9;
          background-color: #999999;
        }
        .text2 {
          padding: 0 20rpx;
        }
      }
      .text-box {
        font-size: 24rpx;
        display: flex;
        justify-content: space-around;
        margin-top: 34rpx;
      }
    }
    &.openModal {
      height: auto;
      flex-direction: column;
      .wrapper {
        transform: translateY(0);
        -webkit-transform: translateY(0);
      }
    }
  }
}
.more {
  text-align: center;
  padding: 28rpx 0 32rpx;
  background-color: #FFFFFF;
  margin: 20rpx 0 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(194,172,120,1);
  .icon {
    width: 16rpx;
    height: 18rpx;
    margin-left: 12rpx;
  }
}
.new-pop-style {
  .new-pop-box {
    height: 306rpx !important;
    .pop-tit {
      margin-top: 24rpx;
      font-size: 26rpx;
    }
    .pop-conter {
      font-size: 20rpx;
      color: #333333;
    }
    .pop-foot {
      justify-content: center;
      .cur {
        font-size: 23rpx;
        border: none !important;
      }
    }
  }
}
.time {
  margin: 20rpx auto 0;
  width: 178rpx;
  height: 50rpx;
  border-radius: 25rpx;
  border: 1px solid rgba(255,255,255,1);
  font-size: 24rpx;
  font-weight: 500;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .time-icon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 14rpx;
    vertical-align: middle;
  }
}
</style>
